.nine-image-container {
  display: flex;
  flex-wrap: wrap;
  margin: 12px;
  padding: 12px;
  background-color: transparent;
  
  // 单张图片样式
  &.single-image {
    .image-wrapper {
      width: auto;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: auto;
    }
  }
  
  // 2张、3张或4张图片样式 - 2*2布局
  &.two-or-four-images {
    .image-wrapper {
      width: calc(50% - 50px);
      height: auto;
      margin-bottom: 32px;
      
      &:nth-child(2n) {
        margin-right: 20px;
        margin-left: auto;
      }
    }
    
    // 3张图片特殊处理 - 形成2*2布局的视觉效果
    &.three-images {
      // 确保第三张图片在第二行居中显示
      .image-wrapper:nth-child(3) {
        width: calc(100% - 100px);
        margin-left: auto;
        margin-right: auto;
      }
    }
  }

  // 多张图片（5、6、7、8、9张）样式 - 使用grid布局实现九宫格
  &.multi-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    width: 100%;
    
    .image-wrapper {
      width: 100%;
      aspect-ratio: 1;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: auto;
    }
  }
}

.image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  text-align: center;
  background-color: #f7f7f7;
  
  // 点击效果
  &:active {
    opacity: 0.8;
  }
  
  // 隐藏超过9张的图片
  &.hidden {
    display: none;
  }
}

// 图片数量过多时的覆盖层
.image-count-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

// 图片序号覆盖层
.image-index-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
}